import { Meta } from '@storybook/addon-docs/blocks';
import img from './assets/unify.png';

<Meta title="Docs/Introduction" />

<div style={{ margin: '0 auto', maxWidth: '600px', color: 'white', textAlign: 'center' }}>
  <img
    style={{ width: '75%', margin: '0 auto' }}
    src="https://github.com/reaviz/reaflow/raw/master/docs/assets/logo.png"
  />
  <br />
  Node-based Visualizations for React
  <br />
  <a href="https://github.com/reaviz/reaflow/workflows/build/" target="_blank">
    <img src="https://github.com/reaviz/reaflow/workflows/build/badge.svg?branch=master" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://npm.im/reaflow" target="_blank">
    <img src="https://img.shields.io/npm/v/reaflow.svg" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://npm.im/reaflow" target="_blank">
    <img src="https://badgen.net/npm/dw/reaflow" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://github.com/reaviz/reaflow/blob/master/LICENSE" target="_blank">
    <img src="https://badgen.now.sh/badge/license/apache2" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://bundlephobia.com/result?p=reaflow" target="_blank">
    <img src="https://badgen.net/bundlephobia/minzip/reaflow" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://discord.gg/tt8wGExq35" target="_blank">
    <img src="https://img.shields.io/discord/773948315037073409?label=discord" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://github.com/reaviz/reaflow" target="_blank">
    <img alt="GitHub stars" src="https://img.shields.io/github/stars/reaviz/reaflow?style=social" />
  </a>

  ---

  <a href="https://unifyviz.com?utm=reaflow" target="_blank" style={{ background: 'black', padding: 5, borderRadius: 5, position: 'absolute', bottom: 5, right: 5, width: 250 }}>
    <img src={img} alt="Unify Viz" />
    Checkout <strong>Unify Viz</strong>, our premium 300+ Figma and React chart components →
  </a>

  REAFLOW is a modular diagram engine for build static or interactive editors.
  The library is feature rich and modular allowing for displaying complex
  visualizations with total customizability.

  If you are looking for network graphs, checkout [reagraph](https://reagraph.dev).
</div>
